<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div class="wrapper">
    <video id="video" width="765" height="430" controls src="https://media.w3.org/2010/05/sintel/trailer.mp4"></video>
    
    <div class="speed">
      <div class="speed-bar">1X</div>
    </div>
  </div>

  <script>
    // 随着彩色容器高度的变化，控制视频播放速度
    // 鼠标在白色容器上滑动，带来彩色容器的高度变化
    // 在白色容器上监听到鼠标的移动

    const speed = document.querySelector('.speed')
    const speedBar = document.querySelector('.speed-bar')
    const video = document.getElementById('video')

    
    speed.addEventListener('mousemove', (e) => {
      const y = e.pageY - speed.offsetTop
      const percent = y / speed.offsetHeight
      const height = Math.round(percent * 100) + '%'

      const min = 0.4
      const max = 4
      const playbackRate = percent * (max - min) + min
    
      speedBar.style.height = height
      speedBar.textContent = playbackRate.toFixed(2) + 'X'
      
      video.playbackRate = playbackRate
    })
  </script>
</body>
</html>